<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        html,
        body {
            height: 100%;
            padding: 0;
            margin: 0;
            background: #22272F;
        }

        .box {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .user-img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }

        .user-name {
            color: #fff;
            text-align: center;
            padding: 10px 30px;
        }

        .text-center {
            text-align: center;
        }

        .disc-text {
            font-size: 12px;
            color: #ddd;
            padding: 10px 30px;
        }

        .time {
            height: 80px;
            color: #eee;
            box-sizing: border-box;
            padding-top: 60px;
        }

        .btn-box {
            margin-top: 30px;
        }

        .end-btn {
            border: 0;
            background: #FF3939;
            color: #fff;
            width: 120px;
            height: 40px;
            border-radius: 20px;
            font-size: 16px;
            margin: 0 5px;
            outline: none;
        }

        .ok-btn {
            border: 0;
            background: #5280FD;
            color: #fff;
            width: 120px;
            height: 40px;
            border-radius: 20px;
            font-size: 16px;
            margin: 0 5px;
            outline: none;
        }

        #speaker{
            border: 0;
            background: #5280FD;
            color: #fff;
            width: 120px;
            height: 40px;
            border-radius: 20px;
            font-size: 16px;
            margin: 0 5px;
            outline: none;
        }

        #refuseBtn {
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="text-center">
            <img src="./static/im/admin.png" id="userHead" class="user-img" alt="">
            <div class="user-name" id="userName"></div>
            <div class="disc-text" id="disText">邀请语音通话</div>
            <div class="time" id="callTime"></div>
            <div class="btn-box" id="refuseBtn">
                <button class="end-btn" id="closeCall">挂断</button>
                <button class="speaker-btn" id="speaker">免提</button>
            </div>
            <div class="btn-box" id="onPhoneBtns">
                <button class="end-btn" id="refuseDom">拒绝</button>
                <button class="ok-btn" id="onPhoneBtn">接听</button>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    apiready = function () {
        var isOn = false
        var agoraRtc = api.require('agoraRtc');
        var switchLoudspeaker = api.require('switchLoudspeaker');
        var tencentTRTC = api.require('tencentTRTC');
        agoraRtc.init({ appId: api.pageParam.id });
        // 用于常见的一对一或群聊，频道中的任何用户可以自由说话
        agoraRtc.setChannelProfile({
            profile: 0
        }, function (ret) {
            if (ret.code == 0) {
                //success
            }
        });
        agoraRtc.remoteUserOfflineListener(function(ret) {
            api.sendEvent({
                name: 'viceCall',
                extra: {
                    action: 'close',
                    to: api.pageParam.to
                }
            })
            agoraRtc.destroy();
        });
        // 赋值头像
        document.getElementById('userHead').src = api.pageParam.ext.avatar
        // 赋值名称
        document.getElementById('userName').innerHTML = api.pageParam.ext.name
        var timer = null

        document.getElementById('speaker').addEventListener('click', function() {
            isOn = !isOn
            var dom = document.getElementById('speaker')
            if(!isOn) {
                // 扬声器打开
                dom.style.background = '#5280FD'
                dom.style.color = '#fff'
            }else{
                dom.style.background = '#9eb7fc'
                dom.style.color = '#ccc'
            }
            if(isOn){
                tencentTRTC.startLocalAudio();
                tencentTRTC.setAudioRoute({
                    route:0
                });
                switchLoudspeaker.switchType({
                    type : 'receiver',
                });
            }else{
                tencentTRTC.stopLocalAudio()
                tencentTRTC.setAudioRoute({
                    route:1
                });
                switchLoudspeaker.switchType({
                    type : 'loudspeaker',
                });
            }
        })

        document.getElementById('onPhoneBtn').addEventListener('click', function () {
            var resultList = api.hasPermission({
                list:['microphone']
            });
            var granted = resultList[0].granted;
            if(!granted){
                api.requestPermission({
                    list: ['microphone'],
                }, function(res) {
                    if (res.list[0].granted) {

                    }
                });
            }else{
                agoraRtc.joinChannel({
                    token: api.pageParam.ext.token,
                    channel: api.pageParam.ext.channel,
                    uid: 0
                }, function (ret) {
                    if (ret.code == 0) {

                        agoraRtc.muteLocalAudioStream({
                            mute: false
                        }, function(ret) {
                            if (ret.code == 0) {
                                //success
                            }
                        });

                        // 打开音频
                        agoraRtc.enableAudio(function (ret) {
                            if (ret.code == 0) {
                                //success
                                console.log('打开音频成功')
                            }
                        });
                        agoraRtc.resumeAudio(function(ret) {
                            if (ret.code == 0) {
                                //success
                            }
                        });


                        tencentTRTC.stopLocalAudio()
                        tencentTRTC.setAudioRoute({
                            route:1
                        });
                        //success

                        api.sendEvent({
                            name: 'viceCall',
                            extra: {
                                action: 'answer',
                                to: api.pageParam.to
                            }
                        })

                        document.getElementById('refuseBtn').style.display = 'block'
                        document.getElementById('onPhoneBtns').style.display = 'none'
                        
                        var time = 0
                        document.getElementById('disText').innerHTML = '正在通话中'
                        timer = setInterval(function () {
                            time++
                            var m = parseInt(time / 60)
                            if (m.toString().length < 2) {
                                m = '0' + m
                            }
                            var h = parseInt(time % 60)
                            if (h.toString().length < 2) {
                                h = '0' + h
                            }
                            document.getElementById('callTime').innerHTML = (m + ':' + h)
                        }, 1000)
                    }
                });
            }
        })

        document.getElementById('closeCall').addEventListener('click', function () {
            // 挂断通话
            agoraRtc.leaveChannel(function (ret) {
                if (ret.code == 0) {
                    //success
                    api.sendEvent({
                        name: 'viceCall',
                        extra: {
                            action: 'close',
                            to: api.pageParam.to
                        }
                    })
                    agoraRtc.destroy();
                }
            });
        })
        document.getElementById('refuseDom').addEventListener('click', function () {
            // 拒绝通话
            console.log('拒绝')
            api.sendEvent({
                name: 'viceCall',
                extra: {
                    action: 'refuse',
                    to: api.pageParam.to
                }
            })
            agoraRtc.destroy();
        })

        document.getElementById('closeCall').onclick = function () {
            // 挂断通话
            agoraRtc.leaveChannel(function (ret) {
                if (ret.code == 0) {
                    //success
                    api.sendEvent({
                        name: 'viceCall',
                        extra: {
                            action: 'close',
                            to: api.pageParam.to
                        }
                    })
                    agoraRtc.destroy();
                }
            });
        }
    };
</script>

</html>